<template>
  <div>
      <h1>Vue语法---响应式数据</h1>
      <h1>{{ num }}</h1>
      <h1>{{ data.list }}</h1>
      <h1>{{ data.stus }}</h1>
      <input type="button" value="修改num的值" @click="fn">
      <input type="button" value="修改list的值" @click="fn1">
      <input type="button" value="修改stus的值" @click="fn2">
  </div>
</template>

<script setup lang="ts">
//ref  实现任意类型的响应式数据   .value
//reactive  实现对象类型的响应式数据 不需要
import {ref,reactive} from 'vue'

let num:any = reactive({
    a:100
})

let data:any = reactive({
  list:["好好学习","天天向上","多挣钱"],
  stus:[
    {id:1,name:"木吒"},
    {id:2,name:"金吒"},
    {id:3,name:"哪吒"}
  ]
})

const fn = ()=>{
  num.a = 200
}

const fn1 = ()=>{
  data.list[1] = "不想学习，只想吃好，喝好，玩好"
}

const fn2 = ()=>{
  data.stus[2].name  = "饺子"
}
</script>

<style scoped>

</style>